import { BasicColumn } from '/@/components/Table'
import dayjs from 'dayjs'
import _get from 'lodash.get'
import { h } from 'vue'
import { Tag } from 'ant-design-vue'

export const columns: BasicColumn[] = [
  {
    title: '请求时间',
    dataIndex: 'timestamp',
    width: 50,
    customRender({ text }) {
      return dayjs(text).format('YYYY-MM-DD HH:mm:ss')
    },
  },
  {
    title: '请求方法',
    dataIndex: 'request.method',
    width: 20,
    customRender({ record, column }) {
      const value = _get(record, column.dataIndex!)
      let color = ''
      if (value === 'GET') {
        color = '#87d068'
      }
      if (value === 'POST') {
        color = '#2db7f5'
      }
      if (value === 'PUT') {
        color = '#ffba5a'
      }
      if (value === 'DELETE') {
        color = '#ff5500'
      }
      return h(Tag, { color }, () => value)
    },
  },
  {
    title: '请求URL',
    dataIndex: 'request.uri',
    width: 200,
    customRender({ record, column }) {
      return _get(record, column.dataIndex!)
    },
  },
  {
    title: '响应状态',
    dataIndex: 'response.status',
    width: 50,
    customRender({ record, column }) {
      const value = _get(record, column.dataIndex!)
      let color = ''
      if (value < 200) {
        color = 'pink'
      } else if (value < 201) {
        color = 'green'
      } else if (value < 399) {
        color = 'cyan'
      } else if (value < 403) {
        color = 'orange'
      } else if (value < 501) {
        color = 'red'
      }
      return h(Tag, { color }, () => value)
    },
  },
  {
    title: '请求耗时',
    dataIndex: 'timeTaken',
    width: 50,
    customRender({ record, column }) {
      const value = _get(record, column.dataIndex!)
      let color = 'red'
      if (value < 500) {
        color = 'green'
      } else if (value < 1000) {
        color = 'cyan'
      } else if (value < 1500) {
        color = 'orange'
      }
      return h(Tag, { color }, () => `${value} ms`)
    },
  },
]
